<template>
  <div class="dashboard-container">
    <div id="map"></div>
    <!-- 头部 -->
    <div class="titleTop">
      <div class="left">
        <div>
          <el-select style="width: 166px;" v-model="farmTypeName" @change="farmCodeSelect" placeholder="请选择">
            <el-option v-for="item in farmTypeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="center">
        农垦集团仓储资源管理系统
      </div>
      <div class="right">
        <span class="loginOut" @click="handleLogin">进入系统</span>
        <span class="loginOut" @click="logout">退出系统</span>
      </div>
    </div>
    <!-- 左侧3 -->
    <div class="bigLeft">
      <!-- w520 -->
      <div class="Left1 LeftItem">
        <div class="bigLeftImage"></div>
        <div class="bigConter">
          <p class="titel">基本信息</p>
          <div class="infoBox">
            <div class="item">
              <p><span>仓储数量</span>{{ echApiObj.wareTotal }}个</p>
            </div>
            <div class="item">
              <p><span>粮食总量</span>{{ echApiObj.Total }}万斤</p>
            </div>
            <div class="item">
              <p><span>今年库存量</span>{{ echApiObj.inbound }}万斤</p>
            </div>
            <div class="item">
              <p><span>今年销售量</span>{{ echApiObj.sale }}万斤</p>
            </div>
          </div>
        </div>
        <div class="bigImage"></div>
      </div>
      <div class="Left2 LeftItem">
        <div class="bigLeftImage"></div>
        <div class="bigConter">
          <p class="titel">粮仓数量统计图</p>
          <div id='echart1'></div>
        </div>
        <div class="bigImage"></div>
      </div>
      <div class="Left2 LeftItem">
        <div class="bigLeftImage"></div>
        <div class="bigConter">
          <p class="titel">各类型仓库储量年度统计图</p>
          <div id='echart2'></div>
        </div>
        <div class="bigImage"></div>
      </div>
    </div>
    <!-- 右侧2 -->
    <div class="bigRight">
      <!-- w520 -->
      <div class="Left2 LeftItem">
        <div class="bigLeftImage"></div>
        <div class="bigConter">
          <p class="titel">主粮作物储量情况统计图</p>
          <el-select popper-class="echart3Sele" v-model="value" @change="echart3Sele" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label">
            </el-option>
          </el-select>
          <div id='echart3'></div>
        </div>
        <div class="bigImage"></div>
      </div>
      <div class="Left2 LeftItem">
        <div class="bigLeftImage"></div>
        <div class="bigConter">
          <p class="titel">主粮作物储量占比统计图</p>
          <div id='echart4'></div>
        </div>
        <div class="bigImage"></div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="bigFoot">
      <div class="bigLeftImage"></div>
      <div class="bigConter">
        <p class="titel">仓库售粮情况统计图</p>
        <div id='echart5'></div>
      </div>
      <div class="bigImage"></div>
    </div>
    <!-- 图例 -->
    <div class="tuliBox">
      <div class="title">图例</div>
      <div class="item"><img src="../../../public//flat.png" alt="">
        <div>平仓</div>
      </div>
      <div class="item"><img src="../../../public//vertical.png" alt="">
        <div>竖仓</div>
      </div>
      <div class="item"><img src="../../../public//temporary.png" alt="">
        <div>临时仓</div>
      </div>
    </div>
  </div>
</template>

<script>
import Map from 'ol/Map'
import View from 'ol/View'
import Control from 'ol/control/Control'
import { ScaleLine, defaults } from "ol/control";
import Overlay from 'ol/Overlay'
import { fromLonLat } from 'ol/proj'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { GeoJSON } from "ol/format";
import { ImageWMS, Vector } from "ol/source";
import Polygon from "ol/geom/Polygon";
import { DoubleClickZoom } from 'ol/interaction'
import { Circle, Fill, Icon, Stroke, Style, Text } from "ol/style";
import XYZ from "ol/source/XYZ";
import { mapGetters } from 'vuex'
import * as echarts from 'echarts';
import axios from 'axios';
import { tableApi } from '@/api/cageMange'
import { echart1Api, echart2Api, echart3Api, echApi, echart4Api, echart5Api, unitSelectApi } from '@/api/dashhboard'
import { selectApi, cropinfoSelectApi } from '@/api/select'
import store from '@/store';
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ]),
    routes() {
      return store.getters.addRoutes
    },
  },
  data() {
    return {
      layers: [
        {
          name: "天地图影像图层",
          url: `http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${this.$key}`,
          visible: true,
          className: "11",
        },
      ],
      echApiObj: {},
      map: null,
      farmTypeList: [],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '大豆',
      vectorLayerPointList: [],
      InitializeData: [],
      farmTypeName: this.$farmCode,
      vectorLayerPoint2: null
    }
  },
  methods: {
    farmCodeSelect(e){
      if(e!='000'){
        selectApi({ type: e }).then((res) => {
          this.teamList = res.data.dictItemList
        })
      }
      cropinfoSelectApi().then((res) => {
        this.options = res.data;
        this.value = res.data[0].label
      })

      this.createAllBox()
      this.createFarm()
    },
    echart3Sele(e) {
      console.log(e);
      echart3Api(this.farmTypeName, this.value).then((res) => {
        this.handleLoadEchart3(res.data);
      })
    },
    initMap(center) {
      if(this.map!==null){
          this.map.setTarget(null); // 移除地图的渲染容器
          this.map.setLayerGroup(null); // 移除所有图层
          this.map.setSize(null); // 移除地图的尺寸
          this.map.setView(null); // 移除地图的视图
          this.map = null; // 释放地图实例
      }
      const TMap_layers = this.layers.map((layer) => {
        return new TileLayer({
          className: layer.className,
          source: new XYZ({
            url: layer.url,
          }),
          visible: layer.visible,
        })
      });
      this.map = new Map({
        target: "map",
        // 设置图层
        layers: TMap_layers,
        controls: defaults({
          zoom: false, // 隐藏缩放控件
          attribution: false, // 隐藏信息控件
        }),
        ZIndex: 1111,
        viewMode: "3D",
        view: new View({
          center: center,
          // 设置地图放大级别
          zoom: this.farmTypeName=='000'?8:11,
          minZoom: 5,
          maxZoom: 18,
          projection: "EPSG:4326",
        }),
      });
      // 你可以给元素添加任意的内容或属性或样式，也可以给元素绑定事件
      // let el = document.createElement('div')
      // let marker = new Overlay({
      //     element: el,// 要显示的元素
      //     position: fromLonLat([123.72533499057272, 48.36995075284545], 'EPSG:4326'),// 地图投影的位置
      //     offset: [-17, -17], // 元素显示的像素偏移量
      //     autoPan: true, // 自动移动地图以完整的显示元素
      // })
      // // 添加到地图
      // this.map.addOverlay(marker)
    },
    handleLoadEchart(data) {
      setTimeout(() => {
        let chartDom = document.getElementById(`echart1`);
        let myChart = echarts.init(chartDom);
        let option;
        const colorList = {
          color1: [
            // !! 在此添加渐变过程色 !!
            { offset: 0, color: 'rgb(0, 133, 151)' },
            { offset: 1, color: 'rgb(0, 46, 87)' }
          ],
          color2: [
            // !! 在此添加渐变过程色 !!
            { offset: 0, color: 'rgb(0, 133, 151)' },
            { offset: 1, color: 'rgb(68, 178, 137)' }
          ],
          color3: [
            // !! 在此添加渐变过程色 !!
            { offset: 0, color: 'rgb(58, 171, 138)' },
            { offset: 1, color: '#1ADAE9' }
          ],
        }
        const newArr = [];
        data.forEach((aa, i) => {
          newArr.push({
            value: aa.label,
            name: aa.value,
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: colorList[`color${i + 1}`]
                },
                shadowColor: 'rgba(34,192,245,0.8)',
                shadowBlur: 10
              }
            }
          })

        })
        option = {
          tooltip: {
            trigger: 'item',
            axisPointer: {
              type: 'shadow'
            },
            // formatter: '{b0}<br />面积: {c}'
            formatter: function (params) {
              const xAxisName = params.name;
              const color = params.color;
              const value = params.value;
              return `
                  <div style="text-align: left;">
                    <div style="font-weight: bold;">${xAxisName}</div>
                    <div style=' display: flex;
                    align-items: center;'>
                    <span style="background-color: #21be99;width:5px;height:5px;border-radius: 50%; display: inline-block;margin-right: 5px;"></span>
                    <span> ${value}个</span>
                    </div>

                  </div>
                `;
            }
          },
          legend: {
            orient: 'vertical',
            right: 'left',
            bottom: "10",
            textStyle: {
              color: "#fff"
            }
          },

          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '70%',
              labelLine: {
                show: false //隐藏指示线
              },
              label: {
                show: false //隐藏标示文字
              },
              data: newArr
            }
          ]
        };

        option && myChart.setOption(option);
      }, 0);
    },
    handleLoadEchart2(data) {
      setTimeout(() => {
        var chartDom = document.getElementById('echart2');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          xAxis: {
            type: 'category',
            data: data.year,
            axisLine: {
              lineStyle: {
                color: '#b7beff'
              }
            },
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#b7beff'
              }
            },
          },
          legend: {
            data: ['竖仓', '平仓', '临时仓'],
            textStyle: {
              color: "#fff"
            }
          },
          tooltip: {
            trigger: 'axis',
            // formatter: '{b0}<br />面积: {c}'
            formatter: function (params) {
              let string = '<div style="text-align: left;">'
              params.forEach((item) => {
                string = string + `
                  <div style="font-weight: bold;"><span style="background-color: #21be99;width:5px;height:5px;border-radius: 50%; display: inline-block;margin-right: 5px;"></span>
                    ${item.seriesName}
                  <span>${item.value}万斤</span></div>`
              })
              return string + `</div>`
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          series: [
            {
              data: data.shu,
              type: 'line',
              name: "竖仓"
            },
            {
              data: data.ping,
              type: 'line',
              name: "平仓"
            },
            {
              data: data.lin,
              type: 'line',
              name: "临时仓"
            }
          ]
        };

        option && myChart.setOption(option);
      })

    },
    handleLoadEchart3(data) {
      var chartDom = document.getElementById('echart3');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: 'category',
          data: data.quality,
          axisLine: {
            lineStyle: {
              color: '#b7beff'
            }
          },
        },
        legend: {
          data: ['库存量', '销售量'],
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#b7beff'
            }
          },
        },
        series: [
          {
            data: data.kc,
            type: 'bar',
            name: '库存量'
          },
          {
            data: data.xs,
            type: 'bar',
            name: '销售量'
          }
        ]
      };

      option && myChart.setOption(option);
    },
    handleLoadEchart4(data) {

      var chartDom = document.getElementById('echart4');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '0%',
          left: 'center',
          itemStyle: {
            borderWidth: 0
          },
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,

            label: {
              show: true,
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              color: '#fff',
              formatter: '{b} {c} 万斤'
            },
            labelLine: {
              show: true
            },
            data: data
          }
        ]
      };

      option && myChart.setOption(option);
    },
    handleLoadEchart5(data) {
      var chartDom = document.getElementById('echart5');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: [
          {
            type: 'category',
            data: this.farmTypeName=='000'?data.farm:data.team,
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#b7beff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#b7beff'
              }
            },
            name: "万斤"
          }
        ],
        series: [
          {
            name: '库存量',
            type: 'bar',
            // barWidth: '60%',
            data: data.kc
          },
          {
            name: '销售量',
            type: 'bar',
            // barWidth: '60%',
            data: data.xs
          }
        ]
      };

      option && myChart.setOption(option);
    },
    // 取消地图双击放大
    handleCancelDb() {
      // 取消地图双击放大
      const dblClickInteraction = this.map
        .getInteractions()
        .getArray()
        .find((interaction) => {
          return interaction instanceof DoubleClickZoom;
        });
      this.map.removeInteraction(dblClickInteraction);
    },
    // 农场边界绘制
    layviewSheng() {
      // 农场边界 http://223.0.40.4:5999/geoserver/soil_grid/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=soil_grid%3Apolygon_data_hlbe_bj&outputFormat=application%2Fjson
      this.InitializeData.forEach((item) => {
        const source = new Vector({
          features: new GeoJSON().readFeatures(item),
        });
        const Farmfeature = new Feature({});
        Farmfeature.setId(item.id);
        source.addFeature(Farmfeature);
        const resXLayer = new VectorLayer({
          id: item.id,
          className: "xamLayer",
          source: source,
          zIndex: 999,
          style: new Style({
            // 背景色
            fill: new Fill({
              // color: 'rgba(90, 227, 133,.1)',
              color: "rgba(17,61,50,.2)",
            }),
            // 边框
            stroke: new Stroke({
              // color: '#fff396',
              color: "rgba(63,255,186,1)",
              width: 2,
            }),
            text: new Text({
              // 位置
              textAlign: "center",
              // 基准线

              textBaseline: "middle",
              // 文字样式
              font: "15px 微软雅黑",
              // 文本内容
              text: item.properties.farm_name,
              // 文字颜色
              fill: new Fill({
                color: "#fff",
              }),
            }),
            image: new Icon({
              anchor: [0.5, 0.5], //图标的锚点,经纬度点所对应的图标的位置，默认是[0.5, 0.5]，即为标注图标的中心点位置
              anchorOrigin: "top-right", //锚点的偏移位置，默认是top-left，
              anchorXUnits: "fraction", //锚点X的单位，默认为百分比，也可以使用px
              anchorYUnits: "pixels", //锚点Y的单位，默认为百分比，也可以使用px
              offsetOrigin: "top-right", //原点偏移bottom-left, bottom-right, top-left, top-right,默认 top-left
              scale: 0.7, //可以设置该比例实现，图标跟随地图层级缩放
              src: "mark.png",
            }),
          }),
        });
        this.vectorLayerPointList.push(resXLayer);
        this.map.addLayer(resXLayer);
      });

    },
    // 农场边界请求
    createFarm() {
      // const filterString= "farm_code=" + "'" + 'H00003' + "'"
      let newStr = ''
      if (this.$farmCode&&this.$farmCode!=='000') {
        newStr = `farm_code='${this.$farmCode}'`
      }else{
        if(this.farmTypeName!=='000'){
          console.log(this.farmTypeName);
          newStr = `farm_code='${this.farmTypeName}'`
        }
      }
      axios
        .get(
          `http://223.0.40.4:5999/geoserver/soil_grid/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=soil_grid%3Apolygon_data_hlbe_farm&outputFormat=application%2Fjson&cql_filter=${newStr}`
        )
        .then((ress) => {
          this.InitializeData = ress.data.features
          //  ress.data.features[0].properties;
          let datata
          if(this.farmTypeName!=='000'){
            datata = ress.data.features.filter((item) => {
              return item.properties.farm_code == this.farmTypeName
            })[0].properties
            this.initMap([datata.lon, datata.lat]);
          }else{
            datata=ress.data.features[0].properties
            this.initMap([122.460429, 48.996895])
          }

          
          this.layviewSheng()
          this.getPointList()
          // 添加监听事件
          // this.handleMapClick();
          // // 禁止双击放大
          // this.handleCancelDb();
        });
    },
    createAllBox() {
      echart1Api(this.farmTypeName).then((res) => {
        this.handleLoadEchart2(res.data);
      })
      echart3Api(this.farmTypeName, this.value).then((res) => {
        this.handleLoadEchart3(res.data);
      })
      echApi(this.farmTypeName).then((res) => {
        this.echApiObj = res.data
      })
      echart4Api(this.farmTypeName).then((res) => {
        const newArr = []
        for (let key in res.data) {
          newArr.push({
            value: res.data[key].toFixed(2),
            name: key
          })
        }
        this.handleLoadEchart4(newArr)
      })
      echart5Api(this.farmTypeName).then((res) => {
        const newArr = res.data;


          if(this.farmTypeName=='000'){
            this.farmTypeList.forEach((item, index) => {
              res.data.farm.forEach((v, i) => {
                if (item.value == v) {
                  newArr.farm[i] = item.label
                }
              })
            })
          }else{
            this.teamList.forEach((item, index) => {
              res.data.team.forEach((v, i) => {
                if (item.value == v) {
                  newArr.team[i] = item.label
                }
              })
            })
          }

        console.log(newArr);
        this.handleLoadEchart5(newArr);
      })
      echart2Api(this.farmTypeName).then((res) => {
        this.handleLoadEchart(res.data);
      })
    },
    // 退出登录
    async logout() {
      await this.$store.dispatch('user/logout')
      // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      window.location.href = process.env.VUE_APP_LOGOUT_URL + window.location.href
    },
    // 进入系统
    handleLogin() {
      if (this.routes.length) {
        this.$router.push(this.routes[0].path)
      } else {
        this.$message.error('暂无权限访问该系统')
      }
    },
    setsetImageList(data) {
      if (this.vectorLayerPoint2 !== null) {
        this.map.removeLayer(this.vectorLayerPoint2)
        this.vectorLayerPoint2 = null
      }
      // 矢量源
      const source = new VectorSource()
      // 矢量图层
      const vectorLayerPoint = new VectorLayer({
        source: source,
      });
      data.forEach((item) => {
        let str = ''
        if (item.warehouseType == '平仓') {
          str = 'flat.png'
        } else if (item.warehouseType == '竖仓') {
          str = 'vertical.png'
        } else {
          str = 'temporary.png'
        }
        const styles = new Style({
          image: new Icon({
            src: str,
            scale: 0.25,
            anchor: [0.5, 1]
          }),
        })
        const pointFeature = new Feature({
          geometry: new Point([item.lon, item.lat]),
          WareHouseId: item.id,
          cropType: item.cropType,
          current: item.current,
          rated: item.rated,
          warehouseNumber: item.warehouseNumber,
          personName: item.personName,
          farmName: item.farmName,
          teamName: item.teamName,
          lon: item.lon,
          lat: item.lat,
        });
        pointFeature.setId('Point' + item.id);
        pointFeature.setStyle(styles);
        source.addFeature(pointFeature);
      })
      // arr,type,id
      vectorLayerPoint.setZIndex(999999)
      this.vectorLayerPoint2 = vectorLayerPoint;
      // 将图层添加地图上
      this.map.addLayer(vectorLayerPoint);

    },
    async getPointList() {
      const { data } = await tableApi({
        warehouseType: '',
        farmCode: this.farmTypeName,
        teamCode: '',
        cropType: '',
        warehouseNumber: '',
        rated: '',
        startDate: '',
        endDate: ''
      }, {
        current: 1,
        size: 10000
      })
      this.setsetImageList(data.records)
      // data.records.forEach((item)=>{
      //   (,item.warehouseType,item.id)
      // })
    },
  },
  mounted() {
    console.log(this.$status);
    if (this.$status == '0') {
      unitSelectApi().then(res => {
        this.farmTypeList = res.data
      })
    } else {
      selectApi({ type: 'farm_type' }).then((res) => {
        this.farmTypeList = res.data.dictItemList
        if (this.$status != 0) {
          this.farmTypeList = this.farmTypeList.filter(item => item.value == this.$farmCode)
        }
      })
      if (this.$status != '0') {
        selectApi({ type: this.$farmCode }).then((res) => {
          this.teamList = res.data.dictItemList
        })
      }
    }

    cropinfoSelectApi().then((res) => {
      this.options = res.data;
      this.value = res.data[0].label
    })

    this.createAllBox()
    // this.handleLoadEchart()
    // this.handleLoadEchart2();

    // this.handleLoadEchart4();
    // this.handleLoadEchart5();
    this.createFarm()

  },
}
</script>

<style lang="scss" scoped>
.bigFoot {

  position: absolute;
  left: 560px;
  bottom: 10px;
  width: 70%;
  height: 270px;

  .bigLeftImage {
    height: 100%;
    width: 30px;
    position: absolute;
    top: 0;
    left: 0;
    background: url("../../assets//dashboard//homeLeft.png");
    background-size: 100% 100%;
  }

  .bigImage {
    height: 100%;
    width: 30px;
    position: absolute;
    top: 0;
    right: 0;
    background: url("../../assets//dashboard//homeRight.png");
    background-size: 100% 100%;
  }

  .bigConter {
    height: 100%;
    width: calc(100% - 60px);
    position: absolute;
    top: 0;
    left: 30px;
    background: url("../../assets//dashboard//homeConter.png");
    background-size: 100% 100%;

    .titel {
      font-size: 18px;
      color: #14e9d3;
      margin-left: 20px;
      font-weight: bold;
      height: 10%;
      margin: 10px 20px 0 20px;
    }

    #echart5 {
      margin-left: -3%;
      margin-top: -20px;
      width: 105%;
      height: 90%;
    }
  }
}

.loginOut {
  margin-left: 20px;
  cursor: pointer;
}

.tuliBox {
  position: absolute;
  left: 560px;
  height: 5vh;
  width: 280px;
  bottom: 290px;
  background-color: rgba(0, 87, 130, .4);
  color: #fff;
  font-size: 16px;

  .title {
    width: 20px;
    height: 100%;
    float: left;
    padding: 0 5px;
    box-sizing: border-box;
    line-height: 2.5vh;
  }

  .item {
    float: left;
    width: auto;
    height: 100%;

    img {
      width: 5vh;
      height: 5vh;
      float: left;
    }

    div {
      line-height: 5vh;
      float: left;
    }
  }
}

#map {

  width: 100%;
  height: 100%;
  color: rgb(3, 36, 19);
  // cursor: url(https://webapi.amap.com/theme/v1.3/openhand.cur), default;
}

.dashboard-container {
  width: 100%;
  height: 100%;
}

.bigLeft {
  position: absolute;
  top: 10%;
  left: 20px;
  width: 520px;
  height: 89%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  /* 将布局分为3列 */
  grid-template-rows: repeat(3, 1fr);
  /* 将布局分为3行 */
  gap: 10px;

  /* 设置网格间隔 */
  // font-size: 18px;
  .LeftItem {
    // padding: 15px;
    // background: rgba(0,0,0,.5);
    position: relative;

    .bigLeftImage {
      height: 100%;
      width: 30px;
      position: absolute;
      top: 0;
      left: 0;
      background: url("../../assets//dashboard//homeLeft.png");
      background-size: 100% 100%;
    }

    .bigImage {
      height: 100%;
      width: 30px;
      position: absolute;
      top: 0;
      right: 0;
      background: url("../../assets//dashboard//homeRight.png");
      background-size: 100% 100%;
    }

    .bigConter {
      height: 100%;
      width: calc(100% - 60px);
      position: absolute;
      top: 0;
      left: 30px;
      background: url("../../assets//dashboard//homeConter.png");
      background-size: 100% 100%;
    }
  }

  .Left1 {
    width: 100%;
    height: 100%;

    .titel {
      font-size: 18px;
      color: #14e9d3;
      margin-left: 20px;
      font-weight: bold;
      height: 10%;
      margin: 10px 20px 0 20px;
    }

    .infoBox {
      padding: 2%;
      width: 100%;
      height: 80%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      /* 将布局分为3列 */
      grid-template-rows: repeat(2, 1fr);
      /* 将布局分为3行 */
      gap: 5px;

      .item {
        width: 100%;
        height: 95%;
        border: #14e9d3 1px solid;

        p {
          color: #fff;
          line-height: 6vh;
          margin-left: 20px;

          span {
            display: inline-block;
            color: #14e9d3;
            width: 45%;
          }
        }
      }
    }
  }

  .Left2 {
    width: 100%;
    height: 100%;

    .titel {
      font-size: 18px;
      color: #14e9d3;
      margin-left: 20px;
      font-weight: bold;
      height: 10%;
      margin: 10px 20px 0 20px;
    }

    #echart1 {
      width: 100%;
      height: 80%;
    }

    #echart2 {
      width: 100%;
      height: 80%;
    }
  }
}

.bigRight {
  position: absolute;
  top: 10%;
  right: 20px;
  width: 520px;
  height: 89%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  /* 将布局分为3列 */
  grid-template-rows: repeat(3, 1fr);
  /* 将布局分为3行 */
  gap: 10px;

  /* 设置网格间隔 */
  // font-size: 18px;
  .LeftItem {
    // padding: 15px;
    // background: rgba(0,0,0,.5);
    position: relative;

    .bigLeftImage {
      height: 100%;
      width: 30px;
      position: absolute;
      top: 0;
      left: 0;
      background: url("../../assets//dashboard//homeLeft.png");
      background-size: 100% 100%;
    }

    .bigImage {
      height: 100%;
      width: 30px;
      position: absolute;
      top: 0;
      right: 0;
      background: url("../../assets//dashboard//homeRight.png");
      background-size: 100% 100%;
    }

    .bigConter {
      height: 100%;
      width: calc(100% - 60px);
      position: absolute;
      top: 0;
      left: 30px;
      background: url("../../assets//dashboard//homeConter.png");
      background-size: 100% 100%;
    }
  }

  .Left2 {
    width: 100%;
    height: 100%;

    .titel {
      font-size: 18px;
      color: #14e9d3;
      margin-left: 20px;
      font-weight: bold;
      height: 10%;
      margin: 10px 20px 0 20px;
    }

    #echart3 {
      width: 100%;
      height: 90%;
      margin-top: 20px;
    }

    #echart4 {
      width: 108%;
      height: 100%;
      margin-top: -40px;
    }
  }

  ::v-deep .el-select {
    position: absolute;
    right: 20px;
    top: 10px;
    width: 144px;
    margin-right: 15px;
    box-shadow: 0 0 5px #b1b1b1;
    border-color: #c0c4cc;
    border-radius: 2px;

    .el-input__inner {
      color: #fff;
      font-weight: 800;
      padding: 0 30px 0 15px;
      background-color: rgba(0, 0, 0, 0);
    }

    .el-input__inner:focus {
      border-color: #c0c4cc;
      /* 获取焦点时的边框颜色 */
      box-shadow: 0 0 5px 5px rgba($color: #9e9e9e, $alpha: 0.3);
    }

    .el-input.is-focus .el-input__inner {
      border-color: #c0c4cc;
      /* 获取焦点时的边框颜色 */
      box-shadow: 0 0 5px 5px rgba($color: #9e9e9e, $alpha: 0.3);
    }
  }
}

.titleTop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10%;
  background: url("../../assets//dashboard/titleBack.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;

  .left {
    margin-left: 20px;
    cursor: pointer;
    right: 3%;
    margin-bottom: 1%;
    color: #fff;
    font-size: 100%;
    font-weight: 700;

    ::v-deep .el-select {
      position: absolute;
      left: 20px;
      top: 10px;
      width: 124px;
      margin-right: 15px;
      border: 0;
      font-weight: 800;

      // box-shadow: 0 0 5px #b1b1b1;
      // border-color: #c0c4cc;
      // border-radius: 2px;
      .el-input__inner {
        padding: 0 30px 0 15px;
        font-weight: 800;
        color: #fff;
        background-color: rgba(0, 0, 0, 0);
      }

      .el-input__inner:focus {
        border-color: #c0c4cc;
        /* 获取焦点时的边框颜色 */
        box-shadow: 0 0 5px 5px rgba($color: #9e9e9e, $alpha: 0);
      }

      .el-input.is-focus .el-input__inner {
        border-color: #c0c4cc;
        /* 获取焦点时的边框颜色 */
        box-shadow: 0 0 5px 5px rgba($color: #9e9e9e, $alpha: 0);
      }
    }
  }

  .center {
    width: 800px;
    text-align: center;
    position: absolute;
    left: 50%;
    margin-left: -400px;
    line-height: 10vh;
    font-size: 3em;
    color: #fff;
    font-weight: 700;
  }

  .right {
    margin-right: 20px;
    right: 3%;
    margin-bottom: 1%;
    color: #fff;
    font-size: 100%;
    font-weight: 700;
  }
}
</style>
